<template>
    <div class="Shouye">
        <h1>首页</h1>
        <div ref="echartsContainer" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script>

import axios from 'axios';
import * as echarts from 'echarts';
export default {
    data(){
        return {
            nameList:[],
            numList:[],
            startTime:'2024-11-13',
            endTime:'2024-12-13'
        }
    },
    created(){

    },
    mounted() {
       
        this.getTbStudentList()
    },
    methods:{

      initChart() {
            const chartContainer = this.$refs.echartsContainer;
            const myChart = echarts.init(chartContainer);

            // 指定图表的配置项和数据
            const option = {
                title: {
                text: '用户活跃度'
                },
                tooltip: {},
                legend: {
                data: ['会员量']
                },
                xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.nameList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    name: '会员量',
                    type: 'line',
                    data: this.numList,
                    // smooth: true,
                    itemStyle: {
                        color: 'rgb(255, 127, 80)'
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }],
                        lineStyle: {
                            color: '#000',
                            width: 3
                        }
                    },
                    areaStyle: {
                    color: "rgb(255,191,168)"
                    }
                }
                ]
            };

            myChart.setOption(option);
        },
        getTbStudentList() {
            axios.get("/api/student/findTbStudentList?startTime=" + this.startTime + "&endTime=" + this.endTime)
                .then(res => {
                    console.log(res.data.data)
                    this.nameList = res.data.data.nameList
                    this.numList  = res.data.data.numList
                    this.initChart();
                })
        }

    }
    
}
</script>

<style scoped>

</style>